@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('./fonts.css');
@import url('./icons.css');
@import url('./globals.css');

@layer base {
  html {
    height: 100%;
    width: 100%;
    @apply selection:bg-secondary-300 dark:selection:bg-marble-400;

    /* Firefox */
    scrollbar-color: theme('colors.marble.500') transparent;
  }

  ::-webkit-scrollbar {
    @apply h-2.5 w-2.5;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px 5px rgb(189 189 189 / 0.5); /* marble-500/50 */
    @apply rounded-t-full rounded-b-full border-2 border-solid border-transparent;
  }
}

@layer utilities {
  /* @see: https://css-tricks.com/scrollbars-on-hover/ */
  .hide-scrollbar {
    overflow-y: scroll !important;
    mask-position: left bottom;
    mask-size: 100% 20000px;
    mask-image: linear-gradient(to top, transparent, black),
      linear-gradient(to left, transparent 12px, black 12px);
    transition: mask-position 300ms ease;
    transition-duration: 300ms;
  }

  .hide-scrollbar:hover,
  .hide-scrollbar:focus {
    mask-position: left top;
  }
}

/* hide recaptcha badge */
.grecaptcha-badge {
  visibility: hidden;
}
